<template>
	<view class="info">
		<block v-if="!boxHide">
			<view class="info_box">
				<view class="box_title">
					个人信息
				</view>
				<view class="opportunity_item">
					<image class="opportunity_item_img" :src="list.avatar"></image>
					<view class="opportunity_item_text">
						<view class="opportunity_item_name">
							<view>{{list.name}}</view>

							<view :class="list.status==0 ? 'statusBtn1' : list.status == 1 ? 'statusBtn2' : 'statusBtn3'">
								{{list.status == 0 ? '审核中' : list.status == 1 ? '在保' : '过保'}}
							</view>
						</view>
					</view>
				</view>
				<view class="font_item w120">
					<view>添加时间</view>
					<view>{{list.create_at}}</view>
				</view>
				<view class="font_item w120">
					<view>电话</view>
					<view>{{list.mobile}}</view>
				</view>
				<view class="font_item w120">
					<view>地址</view>
					<view>{{list.country}}</view>
				</view>
				<view class="font_item w120">
					<view>备注</view>
					<view>{{list.desc}}</view>
				</view>
				<view class="font_item w120">
					<view>用户图片</view>
					<view class="font_item_img" v-for="(item,index) in list.image" :key="index">
						<image v-if="item" :src="item" @tap="look(index)"></image>
					</view>
				</view>
			</view>

			<view class="info_box info_box1">
				<view class="box_title">拜访纪录</view>
				<view class="info_item">
					<view class="" v-for="(item,index) in visitList" :key="index">
						<view class="info_item_title">
							<view></view>
							<view>{{item.create_at}}</view>
						</view>
						<view class="info_item_text">{{item.content}}</view>
					</view>

				</view>

			</view>

			<view class="bottom_btn" v-if="list.status != 0">
				<view class="bottom_btn_list">
					<view @tap="getVisit(list.id)">拜访</view>
				</view>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxHide: true,
				type: 0,
				list: [],
				visitList: [],
				user_id: uni.getStorageSync("userId"),
				id: ""
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData(options.id)
		},
		onShow() {
			// 拜访记录
			this.$api.getClientDetails({
				customer_id: this.id
			}, 3).then(res => {
				this.visitList = res.data
			})
		},
		methods: {
			look(index) {
				uni.previewImage({
					urls: this.list.image,
					current: this.list.image[index]
				})
			},
			getData(options) {
				this.$refs.load.initLoading({
					loadType: 1
				}).then(res => {
					this.boxHide = false;
					// 商机列表
					this.$api.getClientDetails({
						id: options,
						user_id: this.user_id
					}, 0).then(res => {
						this.list = res
					})
					this.$refs.load.getLoadingData({})
				})
			},
			getVisit(id) {
				let address = this.list.province+this.list.city+this.list.address;
				uni.navigateTo({ 
					url: '/pages/opportunity/visitList/visitList?id=' + id+"&address="+address
				})
			},

		}
	}
</script>

<style>
	.info {
		padding-bottom: 120upx;
	}

	.info_box {
		width: 100%;
		background: #FFFFFF;
		padding-top: 30upx;
	}

	.info_box1 {
		margin-top: 20upx;
	}

	.opportunity_item {
		width: 100%;
		padding: 30upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 0 0 20upx 20upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.opportunity_item_img {
		width: 92upx;
		height: 92upx;
		border-radius: 50%;
		background: #EEEEEE;
	}

	.opportunity_item_text {
		flex-grow: 1;
		font-size: 24upx;
		color: #9BA7B7;
		margin: 0upx 20upx;
	}

	.opportunity_item_name {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10upx;
		font-size: 30upx;
		color: #000000;
		position: relative;
	}

	.opportunity_item_name view:nth-child(2) {
		width: 120upx;
		line-height: 30upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		margin-left: 10upx;
	}

	.opportunity_item_name view:nth-child(3) {
		font-size: 24upx;
		color: #F74242;
	}

	.font_item {
		min-height: 60upx;
	}

	.info_item {
		width: 100%;
		padding: 0 30upx;
		margin-top: 30upx;
		box-sizing: border-box;
		padding-bottom: 20upx;
	}

	.info_item_title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30upx;
		color: #333333;
	}

	.info_item_title view:nth-child(1) {
		width: 16upx;
		height: 16upx;
		background: #049BFF;
		border-radius: 50%;
		margin-right: 14upx;
	}

	.info_item_text {
		margin-top: 10upx;
		padding-left: 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		color: #666666;
		width: 100%;
	}

	.statusBtn1,
	.statusBtn2,
	.statusBtn3 {
		position: absolute;
		right: 0;
		top: 0;
		padding: 20upx 40upx;
		color: #FFFFFF;
	}

	.statusBtn1 {
		background: #007AFF;
	}

	.statusBtn2 {
		background: #FF801E;
	}

	.statusBtn3 {
		background: #F74242;
	}
</style>
